<template>
<div>
    <el-row class="container">

        <el-col :span="24" style="min-height:60px;height:5%;background-color: #014171;">
            <el-row>
                <el-col :span="10">
                    <div class="logo">{{ shopName }}</div>
                </el-col>
                <el-col :span="14">
                    <div class="userinfo" v-if="login.state">
                        <el-dropdown trigger="click">
                            <span class="el-dropdown-link" style="color:#ffffff;font-size:16px;">{{$t("home.user.login.loginUserLabel")}}：{{login.username}}<i class="el-icon-arrow-down el-icon--right"></i></span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="editPwd">{{$t("home.user.login.editPwdMenuBtn")}}</el-dropdown-item>
                                <el-dropdown-item divided @click.native="logout">{{$t("home.user.login.logoutMenuBtn")}}</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div class="userinfo" v-else>
                        <el-button type="primary" icon="iconfont icon-denglu" @click="invokeShowPwdKeyboardPage(manager)"> {{$t("home.user.noLogin.managerLoginBtn")}}</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-col>

        <el-col :span="24" style="height:95%;margin-top:50px;padding-left:20px;padding-right:20px;">
            <el-row :gutter="20" style="height:30%;">
                <el-col :span="8" style="height:100%;">
                    <div @click="showCollectmoneyPage">
                        <el-card shadow="always" class="nav" style="min-height:180px;background: #799ae0 left no-repeat;cursor: pointer;">
                            <span class="iconfont icon-iconset0315" style="font-size:50px;"> {{$t("home.nav.checkoutName")}}</span>
                        </el-card>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div @click="showAppointmentPage">
                        <el-card shadow="always" class="nav" style="min-height:180px;background:#FF768C left no-repeat;cursor: pointer;">
                            <span class="iconfont icon-yuyuetixing" style="font-size:50px;"> {{$t("home.nav.appointmentName")}}</span>
                        </el-card>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div @click="showTodaysalesPage">
                        <el-card shadow="always" class="nav" style="min-height:180px;background:#32CCBC left no-repeat;cursor: pointer;">
                            <span class="iconfont icon-jiesuan" style="font-size:50px;"> {{$t("home.nav.todaysalesName")}}</span>
                        </el-card>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20" style="height:30%;">
                <el-col :span="8">
                    <div @click="showReportPage">
                        <el-card shadow="always" class="nav" style="min-height:180px;background:#ffe877 left no-repeat;height:90%;cursor: pointer;">
                            <span class="iconfont icon-baobiao" style="font-size:50px;"> {{$t("home.nav.reportName")}}</span>
                        </el-card>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div @click="showGiftcardPage">
                        <el-card shadow="always" class="nav" style="min-height:180px;background:#D39DD9 left no-repeat;height:90%;cursor: pointer;">
                            <span class="iconfont icon-gift_icon" style="font-size:50px;"> {{$t("home.nav.giftcardName")}}</span>
                        </el-card>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div @click="showSettingPage">
                        <el-card shadow="always" class="nav" style="min-height:180px;background:#569CE3 left no-repeat;height:90%;cursor: pointer;">
                            <span class="iconfont icon-shezhi" style="font-size:50px;"> {{$t("home.nav.settingsName")}}</span>
                        </el-card>
                    </div>
                </el-col>
            </el-row>

            <el-col :span="24">
                <choiceStaff ref="choiceStaff" @click="invokeShowPwdKeyboardPage"></choiceStaff>
            </el-col>

        </el-col>
    </el-row>
    <pwdKeyboard ref="pwdKeyboard"></pwdKeyboard>
    <pwdEdit ref="pwdEdit"></pwdEdit>
</div>
</template>

<script>
import ChoiceStaff from '../components/choiceStaff.vue';
import PwdKeyboard from '../components/pwdKeyboard.vue';
import PwdEdit from '../components/pwdEdit.vue';
import jwt_decode from 'jwt-decode';
import {
    getShopManager
} from '../api/api';

export default {
    components: {
        choiceStaff: ChoiceStaff,
        pwdKeyboard: PwdKeyboard,
        pwdEdit: PwdEdit
    },
    data() {
        return {
            shopName: "",
            login: {
                state: false,
                username: "",
                roleid: ""
            },
            manager: {},
            staffPageSize: 12,
            staffPageData: []
        };
    },
    mounted() {
        if (sessionStorage.getItem('userToken') != null) {
            var userToken = jwt_decode(sessionStorage.getItem("userToken"));
            this.login.username = userToken.staffName;
            this.login.state = true;
            console.log("角色编号：" + userToken.roleId);
            this.login.roleid = userToken.roleId;
            //TODO:当非登陆状态时候，导航的菜单背景颜色为#c0c4cc,#909399
            //TODO:当为登陆状态时候，导航的菜单背景颜色为可用的颜色值
        }
        if (localStorage.getItem("shopToken") != null) {
            var shopToken = jwt_decode(localStorage.getItem("shopToken"));
            this.shopName = shopToken.shopName;
        }
        getShopManager().then(res => {
            let {
                msg,
                code
            } = res;
            if (code !== "0") {
                this.$message({
                    message: msg,
                    type: 'error'
                });
            } else {
                this.manager = res.data;
            }
        });
    },
    created: function () {},
    methods: {
        showAppointmentPage() {
            //显示预约页面
            this.$router.push({
                path: '/appointment_list'
            });
        },
        showTodaysalesPage() {
            //显示今日销售页面
            this.$router.push({
                path: '/todaysales_list'
            });
        },
        showCollectmoneyPage() {
            //显示收银结账页面
            this.$router.push({
                path: '/collectmoney_checkout'
            });
        },
        showReportPage() {
            //显示报表主页面
            this.$router.push({
                path: '/report/index'
            });
        },
        showSettingPage() {
            //普通员工角色无权限
            if (this.login.roleid == 2 || this.login.roleid == 3) {
                //显示设置主页面
                this.$router.push({
                    path: '/setting/index'
                });
            }
        },
        showGiftcardPage() {
            //显示礼卡主页面
            this.$router.push({
                path: '/giftcard/index'
            });
        },
        invokeShowPwdKeyboardPage(user) {
            //先判断当前点击选中的员工项是否颜色背景为选中状态，如果为非选中状态，则设置为选中背景，把其他的员工背景都设置为未选中背景。
            //如果当前的员工背景为已选中状态则把所有的员工背景都设置为未选中背景。
            if (user.id.length != 0) {
                //显示密码数字键盘页面
                this.$refs.pwdKeyboard.showPwdKeyboardPage(user);
            }
        },
        dialogLoginSuccessEvent() {
            var userToken = jwt_decode(sessionStorage.getItem("userToken"));
            this.login.username = userToken.staffName;
            this.login.state = true;
            console.log("角色编号：" + userToken.roleId);
            this.login.roleid = userToken.roleId;
        },
        logout() {
            this.$confirm(this.$t("home.logoutTipContent"), this.$t("home.logoutTipTitle"), {
                type: 'warning'
            }).then(() => {
                sessionStorage.removeItem("userToken");
                this.login.state = false;
            }).catch(() => {

            });
        },
        editPwd() {
            this.$refs.pwdEdit.showPage();
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~scss_vars';

.container {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #012547;
    font-family: Helvetica, Tahoma, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #ffffff;
}

.nav {
    display: flex;
    justify-content: Center;
    align-items: Center;
    //font-family: Helvetica, Tahoma, Arial, sans-serif;
    font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
    //font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;
    font-size: 48px;
    color: #ffffff;
}

.userinfo {
    display: flex;
    justify-content: left;
    align-items: Center;
    text-align: right;
    padding-right: 35px;
    float: right;
    height: 60px;
    cursor: pointer;
}

.logo {
    display: flex;
    justify-content: left;
    align-items: Center;
    height: 60px;
    font-size: 26px;
    padding-left: 20px;
    padding-right: 20px;
}

.logo-width {
    width: 230px;
}

.userCarousel {
    //background-image: linear-gradient( 135deg, #3C8CE7 10%, #00EAFF 100%);
    background-color: #409EFF;
    display: flex;
    justify-content: Center;
    align-items: Center;
    cursor: pointer;
    color: #ffffff;
}
</style>
